<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>时刻小宝</title>

    
    <link rel="stylesheet" href="${staticPath}/show/css/bootstrap.min.css">
    <link rel="stylesheet" href="${staticPath}/show/css/font-awesome.min.css">
    <link rel="stylesheet" href="${staticPath}/show/css/owl.carousel.css">
    <link rel="stylesheet" href="${staticPath}/show/css/owl.theme.css">
    <link rel="stylesheet" href="${staticPath}/show/css/nivo-lightbox/nivo-lightbox.css">
    <link rel="stylesheet" href="${staticPath}/show/css/nivo-lightbox/nivo-lightbox-theme.css">
    <link rel="stylesheet" href="${staticPath}/show/css/animate.css">
    <link rel="stylesheet" href="${staticPath}/show/css/style.css">

    <style>
        .item-list-big .wow{
            height:180px;
        }
    </style>


    <script src="${staticPath}/show/js/modernizr.custom.js"></script>

</head>

<body>

    <a href="#header" id="back-to-top" class="top"><i class="fa fa-chevron-up"></i></a>
    <!-- HHHHHHHHHHHHHHHHHH        Preloader          HHHHHHHHHHHHHHHH -->
    <!-- <div id="preloader"></div> -->
    <!-- HHHHHHHHHHHHHHHHHH        Header          HHHHHHHHHHHHHHHH -->
    <section id="header" class="header">
        <div class="top-bar">
            <div class="container">
                <div class="navigation" id="navigation-scroll">
                        <div class="row">
                            <div class="col-md-11 col-xs-10">
                                <a href="index.html"><span id="logo"><strong class="strong">L</strong>UCY</span></a>
                            </div>
                            <div class="col-md-1 col-xs-2">
                                <p class="nav-button">
                                    <button id="trigger-overlay" type="button">
                                    <i class="fa fa-bars"></i>
                                    </button>
                                </p>
                            </div>
                        </div><!-- /.row -->
                    </div><!-- /.navigation -->
                </div><!--/.container-->
            </div><!--/.top-bar-->

        <div class="container">
            <div class="starting">
                <div class="row">
                    <div class="col-md-6">
                        <img src="${staticPath}/show/img/LUCY2.png" alt="LUCY" class="wow flipInY animated animated">
                    </div>
                    <div class="col-md-6">
                        <div class="banner-text">
                             <h2 class="animation-box wow bounceIn animated"><strong class="strong">安全讯息，一手掌握</strong><br></h2>
                            <p>
                                时刻小宝是一款报警服务移动应用，拥有编程设置，实时监控等功能，无论你在屋里屋外，他都能通过推送向你发布警情，是一款非常好用的智能家居APP。
                            </p>
                            <a href="#" class="btn btn-download wow animated fadeInLeft">
                            <i class="fa fa-android pull-left"></i>
                            <strong>立即下载</strong>
                            <br/>Android版 </a>
                            <a href="#" class="btn btn-download wow animated fadeInRight">
                            <i class="fa fa-apple pull-left"></i>
                            <strong>立即下载</strong>
                            <br/>IOS版 </a>
                        </div> <!-- /.banner-text -->
                    </div>
                </div>
            </div>
            <!-- /.starting -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /#header -->

    <!-- HHHHHHHHHHHHHHHHHH        Bigfeature         HHHHHHHHHHHHHHHH -->
    <section id="bigfeatures" class="img-block-3col wrapper">

        <div class="container">
            <h2 class="animation-box wow bounceIn animated" style="color:black;text-align:center;width:100%;">产品特性</h2>
            <div class="virticle-line"></div>
            <div class="circle"></div>
            <div class="row">
                <div class="col-sm-4">
                    <ul class="item-list-right item-list-big">
                        <li class="wow fadeInLeft animated"> <i class="fa fa-film"></i> 
                            <h3>一键布撤防</h3>
                            <p>指尖上的防护，更安全、更便捷</p>
                        </li>
                        <li class="wow fadeInLeft animated"> <i class="fa fa-bolt"></i> 
                            <h3>实时推送</h3>
                            <p>实时推送，警情消息准确不延误</p>
                        </li>
                        <li class="wow fadeInLeft animated"> <i class="fa fa-heart"></i> 
                            <h3>编程设置 </h3>
                            <p>强大的编程选项，我的设备我做主</p>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-4 col-sm-push-4">
                    <ul class="item-list-left item-list-big">
                        <li class="wow fadeInRight animated"> <i class="fa fa-life-ring"></i>
                            <h3>实时视频监控</h3>
                            <p>屋里屋外，时刻小宝为你呈现眼底，看得见的守护，贴心</p>
                        </li>
                        <li class="wow fadeInRight animated"> <i class="fa fa-lock"></i>
                            <h3>安全</h3>
                            <p>高安全性</p>
                        </li>
                        <li class="wow fadeInRight animated"> <i class="fa fa-star"></i>
                            <h3>微信账号绑定</h3>
                            <p>使用微信绑定账号，APP微信多端推送</p>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-4 col-sm-pull-4 text-center">
                    <div class="animation-box wow bounceIn animated">
                        <img class="highlight-left wow animated" src="${staticPath}/show/img/spark.png" height="192" width="48" alt="">
                        <img class="highlight-right wow animated" src="${staticPath}/show/img/spark.png" height="192" width="48" alt="">
                        <img class="screen" src="${staticPath}/show/img/front.png" alt="" height="581" width="300">
                    </div>
                </div>
            </div>
        </div> <!-- /.container -->
    </section> <!-- /#bigfeatures -->


    <!-- HHHHHHHHHHHHHHHHHH      Screenshots    HHHHHHHHHHHHHHHH -->

    <section id="gallery" class="wrapper">
        <div class="container">
            <h2 class="animation-box wow bounceIn animated">应用外观</h2>
            <div class="virticle-line"></div>
            <div class="circle"></div>
            <div class="row">
                <div class="col-xs-12">
                    <div id="screenshots" class="owl-carousel owl-theme">
                      <a href="${staticPath}/show/img/1.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/1.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                      <a href="${staticPath}/show/img/2.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/2.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                      <a href="${staticPath}/show/img/3.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/3.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                      <a href="${staticPath}/show/img/4.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/4.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                      <a href="${staticPath}/show/img/1.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/1.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                      <a href="${staticPath}/show/img/2.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/2.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                      <a href="${staticPath}/show/img/3.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/3.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                      <a href="${staticPath}/show/img/4.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/4.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                      <a href="${staticPath}/show/img/1.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/1.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                      <a href="${staticPath}/show/img/2.jpg" class="item wow flipInY animated animated" data-lightbox-gallery="screenshots">
                        <img src="${staticPath}/show/img/2.jpg" class="img_res wow animated zoomIn" alt="">
                      </a>
                    </div>
                     <div class="customNavigation row">
                      <a class="btn prev gallery-nav wow animated bounceInLeft"><i class="fa fa-chevron-left"></i></a> 
                      <a class="btn next gallery-nav wow animated bounceInRight"><i class="fa fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

	<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>

    <section id="footer" class="wrapper">
        <div class="container text-center">
            <div class="footer-logo">
                <h1 class="text-center animation-box wow bounceIn animated">lucy</h1>
            </div>
            <ul class="social-icons text-center">
                <li class="wow animated fadeInLeft facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li class="wow animated fadeInRight twitter"><a href="#"><i class="fa fa-twitter"></i></a>
                <li class="wow animated fadeInLeft linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                <li class="wow animated fadeInRight googleplus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                <li class="wow animated fadeInLeft github"><a href="#"><i class="fa fa-github"></i></a>
            </ul>

            <div class="copyright">
                <div>©2017 泉州时刻防盗电子有限责任公司 版权所有</div>
            </div>
        </div><!-- container -->
    </section>




    
    


    <!-- HHHHHHHHHHHHHHHHHH        Open/Close          HHHHHHHHHHHHHHHH -->
    <div class="overlay overlay-hugeinc">
        <button type="button" class="overlay-close" style="height:30px;">Close</button>
        <nav>
        <ul style="font-size:25px;">
            <li class="hideit"><a href="${ctx}/userend/login">用户中心</a></li>
            <li class="hideit"><a href="#header">应用下载</a></li>
            <li class="hideit"><a href="#bigfeatures">产品特性</a></li>
            <li class="hideit"><a href="#gallery">应用外观</a></li>
        </ul>
        </nav>
    </div>
    <script src="${staticPath}/show/js/jquery-1.11.2.min.js"></script>
    <script src="${staticPath}/show/js/wow.min.js"></script>
    <script src="${staticPath}/show/js/owl-carousel.js"></script>
    <script src="${staticPath}/show/js/nivo-lightbox.min.js"></script>
    <script src="${staticPath}/show/js/smoothscroll.js"></script>
    <!--<script src="js/jquery.ajaxchimp.min.js"></script>-->
    <script src="${staticPath}/show/js/bootstrap.min.js"></script>
    <script src="${staticPath}/show/js/classie.js"></script>
    <script src="${staticPath}/show/js/script.js"></script>
    <script>
        new WOW().init();
    </script>
    <script>
        $(document).ready(function(){
            $(".hideit").click(function(){
                $(".overlay").hide();
            });
            $("#trigger-overlay").click(function(){
                $(".overlay").show();
            });
        });
    </script>
    <script>
        $(document).ready(function(){

          var kawa = $('.top-bar');
          var back = $('#back-to-top');
          function scroll() {
             if ($(window).scrollTop() > 700) {
                kawa.addClass('fixed');
                back.addClass('show-top');

             } else {
                kawa.removeClass('fixed');
                back.removeClass('show-top');
             }
          }

          document.onscroll = scroll;
        });
    </script>
    <!--HHHHHHHHHHHH        Smooth Scrooling     HHHHHHHHHHHHHHHH-->
    <script>
        $(function() {
          $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              if (target.length) {
                $('html,body').animate({
                  scrollTop: target.offset().top
                }, 1000);
                return false;
              }
            }
          });
        });
    </script>
</body>
</html>